<script lang="ts" setup>
import HomePanel from "./HomePanel.vue";
import { findNewAPI } from "@/apis/home";
import { onMounted, ref } from "vue";

const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};

const tabs = ref([
  {
    name: "功能一",
  },
  {
    name: "功能二",
  },
  {
    name: "功能三",
  },
  {
    name: "功能四",
  },
]);

import Swiper from "swiper/bundle";

import "swiper/css/bundle";
onMounted(() => {
  // init Swiper:
  const swiper1 = new Swiper(".swiper1", {
    // Optional parameters
    // direction: "vertical",
    // 循环模式选项
    loop: true,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    // },
    // 设置平滑
    slidesPerView: 3,
    spaceBetween: 17,
    // 设置能够同时显示的数量（可设置 auto）
    speed: 500,

    // Navigation arrows
    navigation: {
      nextEl: ".introduction_bottom .swiper-button-next",
      prevEl: ".introduction_bottom .swiper-button-prev",
    },

    // And if we need scrollbar
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});
</script>

<template>
  <div class="functionIntroduction">
    <div style="padding: 70px 0 50px">
      <div class="introduction_bottom" style="display: flex">
        <div style="font-size: 32px">学员作品</div>
        <img
          src="@/assets/images/home/sun.png"
          style="width: 34px; height: 34px"
          alt=""
        />
      </div>
      <div
        class="introduction_bottom"
        style="font-size: 32px; color: #d3d6dd; margin-top: -22px; opacity: 0.4"
      >
        Student works
      </div>
    </div>
    <div class="introduction_bottom">
      <!-- Slider main container -->
      <div class="swiper-button-prev"></div>

      <div class="swiper swiper1">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper" style="height: 96.5% !important">
          <!-- Slides -->
          <div
            class="swiper-slide"
            style="padding: 25px; background-color: #fff"
          >
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/student_one.png"
              alt=""
              style="width: 315px; height: 212px"
            />
            <div style="width: 315px; margin-top: 13px; text-align: center">
              《小黄猫马里奥》
            </div>
            <div style="width: 315px; margin: 16px 0 18px">
              编程很有意思，好玩又有趣，锻炼了我的创造力， 挺喜欢上课的。
            </div>
            <div style="display: flex; width: 315px; justify-content: flex-end">
              <img
                src="@/assets/images/home/people.png"
                style="width: 37px; height: 37px"
                alt=""
              />
              <div style="line-height: 37px">壮壮</div>
            </div>
          </div>
        </div>
        <!-- If we need pagination -->
        <!-- <div class="swiper-pagination"></div> -->

        <!-- If we need navigation buttons -->
      </div>
      <div class="swiper-button-next"></div>

      <!-- <div style="display: flex">
        <div
          class="function"
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ 'active-tab': activeIndex === index }"
          @click="functionClick(index)"
        >
          {{ tab.name }}
        </div>
      </div>
      <img
        src="@/assets/images/home/function_one.png"
        alt=""
        style="width: 1200px; height: 360px; margin-top: 20px"
      /> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.functionIntroduction {
  background-color: #fff;
  height: 740px;
  background-size: contain;
  background: url("@/assets/images/home/student_bg.png") no-repeat center/cover;
  .swiper1 {
    width: 1136px;
    height: 420px;
    .swiper-slide {
      background: #ffffff;
      box-shadow: 2px 7px 9px 1px rgba(39, 128, 166, 0.1);
      border-radius: 12px 12px 12px 12px;
      //   width: 360px;
      //   height: 405px;
    }
  }

  .introduction_bottom {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    .swiper-button-prev,
    .swiper-button-next {
      position: unset !important;
      top: unset !important;
      margin-top: -11px;
      width: 33px;
      height: 38px;
      color: #ffffff;
      background-color: rgba(40, 39, 39, 0.1);
    }
    .swiper-button-prev,
    .swiper-rtl .swiper-button-prev {
      margin-right: 10px;
    }
    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
      margin-left: 10px;
    }
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 26px;
    }
  }
  .function {
    width: 88px;
    height: 36px;
    margin-left: 20px;
    line-height: 36px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
  }
  .active-tab {
    background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
  }
}
</style>
